<template>
  <div class="jifen">
    <title-bar :title="'积分收支明细'"/>
    <van-list
      v-model="loading"
      :finished="finished"
      :immediate-check="false"
      :offset="100"
      @load="loadMore"
    >
      <!-- <van-cell-group>
            <van-cell class="column_panel" style="margin-top: 46px;">
            <div class="column_text">
                <span class="flex_1 text-center">商品名称</span>
                 <span class="flex_1 text-center">积分收支时间</span>
                <span class="flex_1">积分值</span>
            </div>
            </van-cell>
      </van-cell-group>-->
      <div class="row_panel">
        <van-cell-group v-for="(el, i) in items" :key="i" style="margin-bottom: 5px;">
          <van-cell>
            <div class="row_text" slot="title">
              <div class="flex_1 textLeft">
                <div>{{el.detailed}}</div>
                <div class="getTime">{{el.create_time}}</div>
              </div>
              <span class="flex_0 quality" v-if="el.type === 0">-{{el.quantity}}</span>
              <span class="flex_0 quality" v-else>+{{el.quantity}}</span>

              <!-- <span class="flex_1 text-center">{{el.detailed}}</span>
              <span class="flex_1 text-center getTime">{{el.create_time}}</span>
              <span class="flex_1 quality">+{{el.quantity}}</span>-->
            </div>
          </van-cell>
        </van-cell-group>
      </div>
    </van-list>
    <is-empty v-if="isEmpty">抱歉,没有找到符合条件的记录</is-empty>
  </div>
</template>

<script>
import TitleBar from "@/vue/components/title-bar/";
import IsEmpty from "@/vue/components/is-empty/";
import { INTEGRAL_FLOW } from "@/api/user";
export default {
  data() {
    return {
      pages: {
        perPage: 20,
        currPage: 1,
        pageCount: 1
      },
      items: [],
      loading: false,
      finished: false,
      isEmpty: false
    };
  },
  created() {
    this.resetInit();
  },
  methods: {
    initData() {
      return this.$reqGet(
        INTEGRAL_FLOW,
        {
          memberId: this.user.id,
          offset: (this.pages.currPage - 1) * this.pages.perPage,
          limit: this.pages.perPage
        },
        {
          hideLoading: true
        }
      ).then(res => {
        const rows = res.data.data;
        this.items.push(...rows);
        return {
          pageCount: rows.length,
          items: rows.length
        };
      });
    },
    async resetInit(params) {
      this.resetData();

      const page = await this.initData();

      this.$nextTick(() => {
        this.setPages(page);
      });
    },
    isFinished() {
      this.finished = true;
      this.loading = false;
    },
    async loadMore() {
      const vm = this;
      if (vm.pages.pageCount < vm.pages.perPage) {
        vm.$toast({
          message: "没有更多了~",
          position: "top"
        });
        vm.isFinished();
      } else {
        vm.loading = true;
        const page = await vm.initData(true);
        vm.nextPage(page.pageCount);
      }
    },
    nextPage(pageCount = 1) {
      this.pages.currPage += 1;
      this.pages.pageCount = pageCount;
      this.loading = false;
    },
    setPages(page = {}) {
      this.isEmpty = page.items === 0;
      if (page.items < this.pages.perPage) {
        //不满一页
        this.isFinished();
      } else {
        //下一页
        this.nextPage(page.pageCount);
      }
    },
    resetData() {
      this.items = [];
      this.pages = {
        perPage: 20,
        currPage: 1,
        pageCount: 1
      };
      this.loading = true;
      this.finished = false;
      this.isEmpty = false;
    }
  },
  components: {
    [TitleBar.name]: TitleBar,
    [IsEmpty.name]: IsEmpty
  }
};
</script>

<style lang="scss" scoped>
.jifen {
  .column_panel {
    background-color: $green;
    position: fixed;
    top: 0;
    z-index: 11;
    .column_text {
      display: flex;
      text-align: right;
      color: white;
    }
  }
  .row_panel {
    // margin-top: 50px;
    margin-top: 55px;
    .row_text {
      display: flex;
      text-align: right;
      align-items: center;
      .textLeft {
        text-align: left;
      }
      .getTime {
        color: #979797;
        font-size: 13px;
      }
      .quality {
        // padding-right: 20px;
        color: #e9483d;
        font-size: 20px;
      }
    }
  }
}
</style>